<template>
    <view class="paymentMethod">
        <view class="main">
            <view
                :class="item.state ? 'bgc' : 'payWays'"
                v-for="(item, index) in payWaysList"
                :key="index"
                @click="choice(item, index)"
            >
                <image :src="item.img" mode="widthFix"></image>
                <text>{{ item.name }}</text>
            </view>
        </view>
        <!-- 银行卡列表 -->
        <view :class="showList ? 'showBank' : 'bank'">
            <view
                class="bankCard"
                v-for="(item, index) in bankCard"
                :key="index"
                @click="pay(item, index)"
            >
                <view class="icon">
                  <!--  <image
                        v-show="item.state"
                        style="width: 12rpx"
                        src="../../static/images/purchase/choicBankcard.png"
                        mode="widthFix"
                    ></image> -->
                </view>
                <image :src="item.logo" mode="widthFix"></image>
                <text>{{ item.name }}</text>
            </view>
            <view class="add" @click="addBankcard">
                <image
                    src="https://z3.ax1x.com/2021/04/09/cU2jfK.png"
                    mode="widthFix"
                ></image>
                <view class="">添加银行卡</view>
            </view>
        </view>
        <!-- 支付弹出框 -->
        <view class="content">
            <view class="btn" @click="toOpen">确认支付</view>
            <jpPwd
                ref="jpPwds"
                @completed="completed"
                @forget="forget"
                :money="money"
                :contents="paymentMethod"
            >
            </jpPwd>
        </view>
        <!-- 前往充值 -->
        <wyb-popup
            ref="popup"
            type="center"
            height="300"
            width="500"
            radius="6"
            :showCloseIcon="true"
        >
            <view class="tochongzhi">
                <view class="popup-content">余额不足，是否前往充值？</view>
                <view class="checkBox">
                    <view class="box cancel" @click="cancelRecharge">取消</view>
                    <view class="box" @click="toRecharge">确定</view>
                </view>
            </view>
        </wyb-popup>
        <!-- 前往实名认证 -->
        <wyb-popup
            ref="authentication"
            type="center"
            height="300"
            width="500"
            radius="6"
            :showCloseIcon="true"
        >
            <view class="tochongzhi">
                <view class="popup-content"
                    >您还未实名认证，是否前往认证？</view
                >
                <view class="checkBox">
                    <view class="box cancel" @click="cancerAuthentication"
                        >取消</view
                    >
                    <view class="box" @click="toAuthentication">确定</view>
                </view>
            </view>
        </wyb-popup>
        <!-- 前往设置支付密码 -->
        <wyb-popup
            ref="toSetPassword"
            type="center"
            height="300"
            width="500"
            radius="6"
            :showCloseIcon="true"
        >
            <view class="setPassword">
                <view class="popup-content">未设置支付密码,是否前往设置？</view>
                <view class="checkBox">
                    <view class="box cancel" @click="cancelSetPassword"
                        >取消</view
                    >
                    <view class="box" @click="toSetPassword">确定</view>
                </view>
            </view>
        </wyb-popup>
    </view>
</template>

<script>
import wybPopup from "@/components/wyb-popup/wyb-popup.vue";
import jpPwd from "@/components/jp-pwd/jp-pwd.vue";
export default {
    components: {
        jpPwd,
        wybPopup,
    },
    data() {
        return {
            payWaysList: [
                {
                    _id: 1,
                    name: "余额支付",
                    img: "../../static/images/purchase/iconyue.png",
                    state: 0,
                },
                // {
                // 	_id: 2,
                // 	name: "微信支付",
                // 	img: "../../static/images/purchase/iconwechat.png",
                // 	state: 0
                // },
                // {
                // 	_id: 3,
                // 	name: "支付宝支付",
                // 	img: "../../static/images/purchase/iconali.png",
                // 	state: 0
                // },
                {
                    _id: 2,
                    name: "银行卡支付",
                    img: "../../static/images/purchase/iconbank.png",
                    state: 0,
                },
            ],
            bankCard: [
                {
                    _id: 1,
                    name: "建设银行储蓄卡",
                    number: "6654",
                    logo: "https://z3.ax1x.com/2021/04/09/cUgAHI.png",
                    state: 0,
                },
                {
                    _id: 2,
                    name: "农业银行储蓄卡",
                    number: "0917",
                    logo: "https://z3.ax1x.com/2021/04/09/cUhgjU.png",
                    state: 0,
                },
                {
                    _id: 3,
                    name: "浦发银行储蓄卡",
                    number: "2310",
                    logo: "https://z3.ax1x.com/2021/04/09/cUh5NR.png",
                    state: 0,
                },
                // {
                // 	_id: 4,
                // 	name: "中国银行储蓄卡",
                // 	number: "5130",
                // 	logo: "https://z3.ax1x.com/2021/04/09/cUh736.png",
                // 	state: 0
                // },
                // {
                // 	_id: 5,
                // 	name: "邮政银行储蓄卡",
                // 	number: "1107",
                // 	logo: "https://z3.ax1x.com/2021/04/09/cUhvEd.png",
                // 	state: 0
                // },
            ],
            // 用户数据 产品数据
            userInfo: {},
            buyGoodsInfo: {},
            // 当选择支付方式后 赋值给paymentMethod 用于判断用户是否选择支付方式
            paymentMethod: "",
            money: "",
            // 用于判断是否有支付密码
            payPassword: "",
            // 选择银行卡支付时，展开列表
            showList: false,
            // 输入密码次数
            numberOfPasswordEntries: 0,
        };
    },
    methods: {
        // 选择支付方式
        choice(item, index) {
            this.payWaysList.map((a, b) => {
                a.state = 0;
                if (index == b) {
                    a.state = 1;
                }
            });
            this.bankCard.map((a, b) => {
                a.state = 0;
            });
            // 选择银行卡支付 弹出银行卡的列表
            if (index == this.payWaysList.length - 1) {
                this.paymentMethod = "";
                this.showList = true;
            } else {
                this.paymentMethod = item.name;
            }
        },
        // 选择银行
        pay(item, index) {
            this.payWaysList.map((a, b) => {
                if (b != this.payWaysList.length - 1) {
                    a.state = 0;
                }
            });
            this.bankCard.map((a, b) => {
                a.state = 0;
            });
            item.state = 1;
            this.paymentMethod = item.name;
        },
        toOpen() {
            // 判断用户是否选择银行卡
            // console.log(this.userInfo)
            // console.log(this.payPassword)
            if (this.paymentMethod) {
                // 判断用户是否实名认证
                if (this.userInfo.authStatus == "已认证") {
                    if (this.payPassword == null) {
                        // 支付密码为空 前往设置支付密码
                        this.$refs.toSetPassword.show();
                    } else {
                        // 弹出密码输入框
                        this.$refs.jpPwds.toOpen();
                    }
                } else {
                    // 弹出实名认证框
                    this.$refs.authentication.show();
                }
            } else {
                uni.showToast({
                    title: "请选择支付方式",
                    icon: "none",
                });
            }
        },
        // 取消前往实名认证
        cancerAuthentication() {
            this.$refs.authentication.hide();
        },
        // 前往实名
        toAuthentication() {
            uni.navigateTo({
                url: "/pages/IDcard/IDcard",
            });
            // console.log(123)
            this.$refs.authentication.hide();
        },
        // 取消前往设置密码
        cancelSetPassword() {
            this.$refs.toSetPassword.hide();
        },
        // 前往设置支付密码
        toSetPassword() {
            // console.log("前往设置支付密码")
            this.$refs.toSetPassword.hide();
            uni.navigateTo({
                url: "/pages/changeUserInfo/changeWalletPassword",
            });
        },
        // 根据不同商品发送请求
        sendRequest(url) {
            uni.request({
                url,
                method: "POST",
                data: this.buyGoodsInfo,
                header: {
                    userToken: uni.getStorageSync("token"),
                },
                success: (res) => {
                    console.log("res", res.data);

                    uni.hideLoading();
                    // 余额不足 提示用户充值 2052
                    if (res.data.code == 2052) {
                        this.$refs.jpPwds.toCancel();
                        this.$refs.popup.show();
                        // 2066密码错误
                    } else if (res.data.code == 2066) {
                        // console.log(res)
                        uni.showToast({
                            title: "密码错误",
                            icon: "none",
                        });
                        setTimeout(() => {
                            this.$refs.jpPwds.backs();
                        }, 1500);
                        // 2053 购买成功
                    } else if (res.data.code == 2053) {
                        uni.redirectTo({
                            url: "./paySuccess",
                        });
                    } else {
                        uni.showToast({
                            title: "服务器错误，请稍后再试",
                            icon: "none",
                        });
                        this.$refs.jpPwds.backs();
                    }
                },
            });
        },
        completed(e) {
            uni.showLoading({
                title: "请等待...",
            });
            // e是用户输入的密码
            // console.log("密码", e)
            this.buyGoodsInfo = {
                ...this.buyGoodsInfo,
                paymentWay: 1,
                walletPassword: e,
            };
            console.log("10000000", this.buyGoodsInfo);
            // 获取产品类型 调用相应接口 后台判断金额是否充足
            const type = this.buyGoodsInfo.productType;
            switch (type) {
                case "活期理财":
                    console.log("活期理财");
                    this.sendRequest(
                        "http://xrqsb123.vaiwan.com/trans/product-trans/current-product-buy"
                    );
                    break;
                case "定期理财":
                    console.log("定期理财");
                    this.sendRequest(
                        "http://xrqsb123.vaiwan.com/trans/product-trans/regular-product-buy"
                    );
                    break;
                case "混合型":
                    this.sendRequest(
                        "http://xrqsb123.vaiwan.com/trans/product-trans/fund-product-buy"
                    );
                    console.log("混合型");
                    break;
                case "黄金延期":
                    this.sendRequest(
                        "http://xrqsb123.vaiwan.com/trans/product-trans/gold-product-buy"
                    );
                    console.log("黄金");
                    break;
                default:
                    console.log("支付");
            }
        },
        // 点击忘记密码 前往个人中心重新设置
        forget() {
            // console.log('忘记密码')
            uni.navigateTo({
                url: "/pages/changeUserInfo/changeWalletPassword",
            });
        },
        // 新增银行卡
        addBankcard() {
            uni.navigateTo({
                url: "./addBankcard",
            });
        },
        // 取消充值
        cancelRecharge() {
            this.$refs.popup.hide();
        },
        // 前往充值
        toRecharge() {
            this.$refs.popup.hide();
            uni.navigateTo({
                url: "/pages/assets/myBalance",
            });
        },
    },
    // 页面加载时 获取本地数据 拿用户数据 拿购买产品数据
    onLoad(option) {
        // console.log(123)
        this.userInfo = uni.getStorageSync("userInfo");
        this.buyGoodsInfo = uni.getStorageSync("buyGoodsInfo");
        this.money = this.buyGoodsInfo.transactionAmount;
        this.payPassword = this.userInfo.walletPayPassword;
        // 头部
        uni.setNavigationBarTitle({
            title: "选择支付方式",
        });
    },
};
</script>

<style lang="scss" scoped>
.paymentMethod {
    .main {
        margin-top: 40rpx;
        padding: 0 40rpx;

        .payWays {
            padding: 20rpx 10rpx;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            font-size: 30rpx;
            border-bottom: 2rpx solid rgba($color: #f5f5f5, $alpha: 0.8);

            image {
                width: 35rpx;
                height: 35rpx;
                margin-right: 20rpx;
            }
        }

        .bgc {
            background-color: rgba($color: #000000, $alpha: 0.1);
            padding: 20rpx 10rpx;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            font-size: 30rpx;
            border-bottom: 2rpx solid rgba($color: #f5f5f5, $alpha: 0.8);

            image {
                width: 45rpx;
                height: 45rpx;
                margin-right: 30rpx;
            }
        }
    }

    .showBank {
        height: 200rpx;
        padding: 0rpx 60rpx;

        .bankCard {
            border-bottom: 2rpx solid rgba($color: #f5f5f5, $alpha: 0.8);
            font-size: 30rpx;
            padding: 20rpx 0;
            display: flex;
            align-items: center;

            .icon {
                width: 30rpx;
            }

            image {
                width: 30rpx;
                margin-right: 10rpx;
            }
        }
    }

    .bank {
        height: 0;
        transition-duration: 2000;
        overflow: hidden;
        padding: 0rpx 60rpx;

        .bankCard {
            border-bottom: 2rpx solid rgba($color: #f5f5f5, $alpha: 0.8);
            font-size: 30rpx;
            padding: 20rpx 0;
            display: flex;
            align-items: center;

            .icon {
                width: 30rpx;
            }

            image {
                width: 30rpx;
                margin-right: 10rpx;
            }
        }
    }

    .add {
        padding: 20rpx 30rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;

        image {
            width: 30rpx;
            margin-right: 10rpx;
        }
    }

    .btn {
        position: absolute;
        bottom: 0;
        background-color: #3476f1;
        height: 88rpx;
        width: 100%;
        color: #ffffff;
        text-align: center;
        line-height: 88rpx;
    }
}

.tochongzhi {
    padding: 0 20rpx;

    .popup-content {
        margin-top: 20rpx;
        font-size: 30rpx;
        text-align: center;
        height: 200rpx;
        line-height: 200rpx;
    }

    .checkBox {
        display: flex;
        justify-content: space-around;

        .box {
            width: 200rpx;
            height: 70rpx;
            background-color: #3476f1;
            color: #fff;
            font-size: 34rpx;
            text-align: center;
            line-height: 70rpx;
            border-radius: 10rpx;
        }

        .cancel {
            background-color: #f5f5f5;
            color: black;
        }
    }
}

.setPassword {
    padding: 0 20rpx;

    .popup-content {
        margin-top: 20rpx;
        font-size: 30rpx;
        text-align: center;
        height: 200rpx;
        line-height: 200rpx;
    }

    .checkBox {
        display: flex;
        justify-content: space-around;

        .box {
            width: 200rpx;
            height: 70rpx;
            background-color: #3476f1;
            color: #fff;
            font-size: 34rpx;
            text-align: center;
            line-height: 70rpx;
            border-radius: 10rpx;
        }

        .cancel {
            background-color: #f5f5f5;
            color: black;
        }
    }
}
</style>
